<template>
	<view v-if="marketingShow">
		<view class="iconfont-box" @click="close()"><text class="iconfont">&#xe688;</text></view>
		<view class="st-marketing-pendant" @click="toMarketing">
			<img class="img" :src="marketingList.pendant_img" mode="aspectFill">
		</view>
	</view>
</template>

<script>
	/**
	 * 营销优惠展示
	 * @marketingShow 控制组件是否显示 默认 true 
	 */
	import {
		getProDetailPage,
		getProIndexPage,
		getProListPage
	} from "@/utils/toPath.js"
	import {
		adsPath
	} from '@/utils/ads.js'
	export default {
		name: "st-marketing-pendant",
		props: {},
		created() {
			this.getMarketing()
		},
		data() {
			return {
				marketingShow: false, //是否显示
				marketingList: []
			};
		},

		methods: {

			//跳转链接 
			toMarketing() {
				let {
					ad_type,
					path,
					id,
					typeid,
					is_nested,
					appId
				} = this.marketingList.pendant_link
				let url = '';
				if (ad_type == 1) {
					url = getProDetailPage(typeid, {
						id: id
					})
				} else if (ad_type == 2) {
					url = path
				} else if (ad_type == 3) {
					adsPath(3, '', '', path, '');
				} else {
					adsPath(4, '', '', `${path}${'||'}${appId}`, '');
				}
				uni.navigateTo({
					url: url
				})
			},

			// 首页挂件 
			async getMarketing() {
				let params = {
					method: 'api/v2/promo/pendant',
					develop: true,
				}
				let res = await this.$http(params);
				if (res.data) {
					if (res.data.pendant_status == 0) {
						this.marketingShow = false
					} else {
						this.marketingShow = true
						this.marketingList = res.data
					}
				}
			},
			//关闭挂件
			close() {
				this.marketingShow = false
			},
		},

	}
</script>

<style lang="scss" scoped>
	.st-marketing-pendant {
		position: fixed;
		right: 24rpx;
		top: 60%;
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
		overflow: hidden;
		z-index: 99;

		.img {
			width: 100%;
			height: 100%;
		}

	}

	.button {
		width: 392rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		background: linear-gradient(180deg, #FEFBE9 0%, #FAE3AB 100%);
		border-radius: 480rpx;
		margin: 42rpx auto 0;

		.text {
			font-size: 32rpx;
			font-weight: 900;
			background: linear-gradient(180deg, #FF3700 0%, #B50000 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}

	.iconfont-box {
		position: fixed;
		right: 220rpx;
		top: 57%;
		height: 21rpx;
		width: 21rpx;
		z-index: 99;

		.iconfont {
			color: #999;
		}
	}
</style>